<script setup lang="ts">

</script>
<template>
    <ul>
        <!-- Q群气泡 -->
        <el-popover class="box-item" placement="left-end" trigger="hover">
            <template #reference>
                <li>
                    <el-icon>
                        <Search />
                    </el-icon>
                </li>
            </template>
            <template #default>
                <img style="height: 100ppx;width: 100px;" src="@/views/profile/user/images/bcg-03.png" alt="">
            </template>
        </el-popover>
        <!-- 微信气泡 -->
        <el-popover class="box-item" placement="left-end" trigger="hover">
            <template #reference>
                <li>
                    <el-icon>
                        <ChatLineRound />
                    </el-icon>
                </li>
            </template>
            <template #default>
                <img style="height: 100ppx;width: 100px;" src="@/views/profile/user/images/bcg-03.png" alt="">
            </template>
        </el-popover>
        <!-- 微信小程序气泡 -->
        <el-popover class="box-item" placement="left-end" trigger="hover">
            <template #reference>
                <li>
                    <el-icon>
                        <Iphone />
                    </el-icon>
                </li>
            </template>
            <template #default>
                <img style="height: 100ppx;width: 100px;" src="@/views/profile/user/images/bcg-03.png" alt="">
            </template>
        </el-popover>
        <!-- 反馈建议 -->
        <el-popover class="box-item" placement="left-end" trigger="hover">
            <template #reference>
                <li>
                    <el-icon>
                        <Edit />
                    </el-icon>
                </li>
            </template>
            <template #default>
                <span>反馈建议</span>
            </template>
        </el-popover>
        <!-- 联系我们 -->
        <el-popover class="box-item" placement="left-end" trigger="hover">
            <template #reference>
                <li>
                    <el-icon>
                        <Star />
                    </el-icon>
                </li>
            </template>
            <template #default>
                <span>联系我们</span>
            </template>
        </el-popover>
    </ul>
</template>
<style scoped>
ul {
    position: fixed;
    bottom: 100px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    z-index: 100
}

ul>li {
    width: 50px;
    height: 50px;
    background-color: #fff;
    list-style: none;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    cursor: pointer;
}

ul>li:hover {
    background-color: #eee;
}
</style>
